<template>
  <div id="guamai">  

    <el-form ref="form" :model="form" label-width="80px">  
     <el-row> 

        <el-col :span="12" style="display:flex;">

            <el-form-item label="" label-width="0px">
                <el-select  v-model="form.select_num" placeholder="请选择果种" @change="select_change()">
                    <el-option  v-for="(item,index) in select_data" :key="index" :label="item.title" :value="item.maid"></el-option>
                </el-select>
            </el-form-item>

        </el-col>

         <el-col :span="12" style="text-align: right;">            
            <el-button type="primary" style="margin-bottom:10px;" class="custom_color_button" >初始挂卖：{{ init_count }}</el-button>         
            <el-button type="primary" style="margin-bottom:10px;" class="custom_color_button" >挂卖总数：{{ count }}</el-button>         
        </el-col>
    
    </el-row> 
   
   </el-form>
   <!-- 渲染数据list -->
   <exchangguamai-list :datalist="datalist" @up_list_fun_sort="list_fun_sort"> </exchangguamai-list>

      
   <div style="margin-top:20px;text-align: center;">
      <el-pagination
        background
        @current-change="handleCurrentChange"
        :page-size="10"  
        layout="prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
import ExchangguamaiList from '@/view/Exchangeorder/ExchangguamaiList'
export default {
  name: 'guamai',
  data () {
    return {
        datalist:[],
        page:1,
        count:0,
        init_count:0,
        form:{
          select_num:''
        },
        select_data:[],
        sort_price:0
    }
  },
 components:{
    ExchangguamaiList
  },
  created(){
     this.gz_list()
     this.list_fun()
  },
  mounted (){
    
  },
  methods: {
      gz_list(){
            this.post("/manor/listOfData", {
             
	        }).then(res => {
                this.select_data = res.result.list
                this.select_data.unshift({
                  maid:'',
                  title:'全部'
                })
                //console.log(res)
         })
      },
      list_fun(){
          
          this.post("/goods/listOfOnsale", {
              page:this.page,
              maid:this.form.select_num,
              sort_price:this.sort_price
	        }).then(res => {
            this.count = res.result.count
            this.init_count = res.result.init_count
            this.datalist = res.result.list
            //console.log(res)
         })
      },
      list_fun_sort(sort_price){
          this.sort_price = sort_price
          this.post("/goods/listOfOnsale", {
              page:this.page,
              maid:this.form.select_num,
              sort_price:sort_price
	        }).then(res => {
            this.count = res.result.count
            this.init_count = res.result.init_count
            this.datalist = res.result.list
            //console.log(res)
         })
      },
      select_change(){
           this.page =  1
           this.list_fun()

      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
      handleCurrentChange(val) {
        this.page = val
        this.list_fun()
        console.log(`当前页: ${val}`);
      }
  }
}
</script>


<style scoped>
</style>
